<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			/*=======水果内容=======*/
			#div1{
				margin-top: 25px;
				margin-left: 550px;
			}
			/*.c1{
				background-color: rgb(81,141,141);
			}*/
			.c1{
				height: 60px;
				width: 250px;
				background-color: lightgreen;
				margin-bottom: 3px;
				text-align: center;
				line-height: 60px;
			}
			
			.del{
				float: right;
				margin-right: 10px;
				background-color: lightgreen;
				font-size: 20px;
				cursor: pointer;
				
			}
			.c2{
				font-size: 20px;
			}

		</style>
	</head>
	<body>
		<div id="div1">
			<div class="c1">
				<font class="c2">苹果</font>
				<button onclick="del()" class="del">×</button>
			</div>
			<div class="c1">
				<font class="c2">香蕉</font>
				<button onclick="del()" class="del">×</button>
			</div>
			<div class="c1">
				<font class="c2">榴莲</font>
				<button onclick="del()" class="del">×</button>
			</div>
			<div class="c1">
				<font class="c2">火龙果</font>
				<button onclick="del()" class="del">×</button>
			</div>
		</div>
		<div id="div2">
			<input type="text" name="" id="frname" value="" />
			<input type="button" name="" id="" value="确定" onclick="add()"/>
		
		<script type="text/javascript">

			function add(){

				var aNode = document.getElementById('frname') 
				var dNode = document.createElement('div')
				var fruitNode = document.createElement('font')
				var delNode = document.createElement('font')
				fruitNode.innerText = aNode.value
				delNode.innerText = '×'
//				delNode.onclick = del()

				var a = parseInt(Math.random()*255)
				var b = parseInt(Math.random()*255)
				var c= parseInt(Math.random()*255)
				fruitNode.style.backgroundColor = 'rgb('+a+','+b+','+c+')'
				
				aNode.appendChild(fruitNode)
				aNode.appendChild(delNode)
				
				var div1Node = document.getElementById('div1')
				div1Node.insertBefore(fruitNode, div1Node.firstElementChild)
				}
			
			function del(){
				this.parentElement.remove()
			}

		</script>
		</div>
	</body>
</html>
